<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Accueil</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="css/general.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="screen">

    <script src="js/bootstrap.js"></script>

	
</head>
<body>

<div class="corps">
  <header>
    <div id="margetop">
			<img src="img/banludica.png">
		</div>
		  <ul id="menu">
        <li class="active"><a href="index.html">Accueil</a></li>
        <li><a href="continents.html">Continents</a></li>
			  <li><a href="pays.html">Pays</a></li>
			  <li><a href="capitalesdrapeaux.html">Capitales et drapeaux</a></li>
			  <li><a href="reliefspaysages.html">Reliefs et paysages</a></li>
        <li><a href="quizz.html">Quizz</a></li>
        <li><a href="quizz.html">Contact</a></li>
      </ul>
  </header>
  <section class="presentationaccueil">
    <div >
      <h3>Présentation</h3>
      <div>
        Basic panel example Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
       
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </section>
    <aside class="rechercher">
        <form class="navbar-form navbar-left" role="search">
            <div class="theme">
                <label >Rechercher</label>
            </div>
            <div class="contenu">
            <select class="form-control">
                <option>Choisir un thème</option>
                <option>Continents</option>
                <option>Pays</option>
                <option>Capitales et drapeaux</option>
                <option>Reliefs et paysages</option>
            </select>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Rechercher</butto>
            </div>
            </div>
        </form>
    </aside>  

    <aside class="cadeau">
        <form class="navbar-form navbar-left" role="search">
            <div class="theme">
                <label >Répondez et gagner un cadeau</label>
            </div>
            <div class="contenucadeau">
              <p>Quelle est la surface de la France</p>
              <div class="radio-inline">
                  <label class="radio">
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    20000 Km
                  </label>
              </div>
              <div class="radio">
                  <label class="radio-inline">
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    40000 Km
                  </label>
              </div>
                
              <div class="form-group">
                <br>
                <label for="exampleInputEmail1">Email:</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Entrer votre adresse mail">
                <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-play"></span> Valider</button>
              </div>            
            </div>
        </form>
    </aside>    

    <HR>
        <h2>Les Thèmes</h2>
        
<a href="continents.html">
<div class="voletcontinent">
  <div class="themetext"><h3>Continents</h3></div>
</div>
</a>
<a href="pays.html">
<div class="voletpays">
  <div class="themetext"><h3>Pays</h3></div>
</div>
</a>
<a href="capitalesdrapeaux.html">
<div class="drapeaupays">
  <div class="themetext"><h3>Capitales et drapeaux</h3></div>
</div>
</a>
<a href="reliefspaysages.html">
<div class="paysagevolet">
  <div class="themetext"><h3>Reliefs et paysages</h3></div>
</div>
</a>
<a href="quizz.html">
<div class="quizzvolet">
  <div class="themetext"><h3>Quizz</h3></div>
</div>
</a>
<br><br>

<footer>
        <!--<ul id="social">
            <li><a href="#" title="facebook" rel="external nofollow"><img alt="" src="images/facebook.png"></a></li>
            <li><a href="#" title="twitter" rel="external nofollow"><img alt="" src="images/twitter.png"></a></li>
            <li><a href="#" title="linkedin" rel="external nofollow"><img alt="" src="images/linkedin.png"></a></li>
            <li><a href="#" title="rss" rel="external nofollow"><img alt="" src="images/rss.png"></a></li>
        </ul>-->
        <div id="privacy">
           Réalisé par:
        </div>
</footer>

</div>

</body>
</html>